'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { UserAvatar } from '@/components/user-avatar'
import { ParameterEditorWithPermissions } from '@/components/parameter-editor-with-permissions'
import { useAuth } from '@/hooks/use-auth'
import { ArrowLeft, TestTube, Settings } from 'lucide-react'

export default function DemoPermissionsPage() {
  const [deviceId, setDeviceId] = useState('1')
  const [tableName, setTableName] = useState('base_params')
  const { user, loading } = useAuth()
  const router = useRouter()

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">加载中...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>需要登录</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-600 mb-4">请先登录以查看权限演示</p>
            <Button onClick={() => router.push('/login')} className="w-full">
              前往登录
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 页面头部 */}
        <div className="mb-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button
                variant="outline"
                onClick={() => router.push('/')}
                className="flex items-center space-x-2"
              >
                <ArrowLeft className="h-4 w-4" />
                <span>返回首页</span>
              </Button>
              
              <div>
                <h1 className="text-2xl font-bold text-gray-900">
                  权限系统演示
                </h1>
                <p className="text-gray-600">测试不同角色的数据编辑权限</p>
              </div>
            </div>

            <div className="flex items-center space-x-4">
              {/* 用户头像演示 */}
              <div className="border rounded-lg p-2 bg-white">
                <UserAvatar />
              </div>
              
              <Button
                variant="outline"
                onClick={() => router.push('/test-permissions')}
              >
                <TestTube className="h-4 w-4 mr-2" />
                权限测试
              </Button>
              
              {user.role_code === 'ADMIN' && (
                <Button
                  variant="outline"
                  onClick={() => router.push('/admin')}
                >
                  <Settings className="h-4 w-4 mr-2" />
                  管理后台
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* 用户信息卡片 */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>当前用户信息</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <div className="text-sm font-medium text-gray-600">姓名</div>
                <div className="text-lg font-semibold">{user.full_name}</div>
              </div>
              <div>
                <div className="text-sm font-medium text-gray-600">用户名</div>
                <div className="text-lg font-semibold">@{user.username}</div>
              </div>
              <div>
                <div className="text-sm font-medium text-gray-600">角色</div>
                <Badge variant="default">{user.role_name}</Badge>
              </div>
              <div>
                <div className="text-sm font-medium text-gray-600">角色代码</div>
                <Badge variant="outline">{user.role_code}</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 测试控制面板 */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>测试控制面板</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="deviceId">设备ID</Label>
                <Input
                  id="deviceId"
                  value={deviceId}
                  onChange={(e) => setDeviceId(e.target.value)}
                  placeholder="输入设备ID"
                />
              </div>
              <div>
                <Label htmlFor="tableName">参数表类型</Label>
                <select
                  id="tableName"
                  value={tableName}
                  onChange={(e) => setTableName(e.target.value)}
                  className="w-full mt-1 p-2 border rounded-md"
                >
                  <option value="base_params">基础参数</option>
                  <option value="naming">命名参数</option>
                  <option value="position">位置参数</option>
                </select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 权限说明 */}
        <Alert className="mb-6">
          <AlertDescription>
            <strong>权限说明：</strong>
            根据您的角色 <Badge variant="outline">{user.role_name}</Badge>，
            您只能编辑特定数据来源的字段。管理员可以编辑所有字段，查看角色只能查看不能编辑。
          </AlertDescription>
        </Alert>

        {/* 参数编辑器 */}
        {deviceId && tableName && (
          <ParameterEditorWithPermissions
            tableName={tableName}
            deviceId={parseInt(deviceId)}
            deviceName={`测试设备-${deviceId}`}
            onSave={() => {
              console.log('参数保存成功')
            }}
          />
        )}

        {/* 快速测试链接 */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>快速测试链接</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <Button
                variant="outline"
                onClick={() => router.push('/piping')}
                className="justify-start"
              >
                配管专业页面
              </Button>
              <Button
                variant="outline"
                onClick={() => router.push('/piping/parameters-v2?code=C2&name=测试参数表&type=base_params&deviceId=1&deviceName=测试设备')}
                className="justify-start"
              >
                权限控制参数页面
              </Button>
              <Button
                variant="outline"
                onClick={() => router.push('/test-permissions')}
                className="justify-start"
              >
                详细权限测试
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* 角色切换提示 */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>测试不同角色</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <p><strong>采购人员 (procurement/proc123):</strong> 只能编辑采购相关字段</p>
              <p><strong>设计人员 (design/design123):</strong> 只能编辑设计相关字段</p>
              <p><strong>监测人员 (monitoring/mon123):</strong> 只能编辑监测相关字段</p>
              <p><strong>施工人员 (construction/const123):</strong> 只能编辑施工相关字段</p>
              <p><strong>建设人员 (build/build123):</strong> 只能编辑建设相关字段</p>
              <p><strong>运维人员 (operations/ops123):</strong> 只能编辑运维相关字段</p>
              <p><strong>查看人员 (viewer/view123):</strong> 只能查看，不能编辑</p>
              <p><strong>管理员 (admin/admin123):</strong> 可以编辑所有字段</p>
            </div>
            <div className="mt-4">
              <Button
                variant="outline"
                onClick={() => router.push('/login')}
              >
                切换用户登录
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
